<template>
  <div
    v-loading="loading"
    style="display: flex; flex-direction: column; flex: 1"
    element-loading-text="加载中..."
  >
    <div class="header flex-justify-between">
      <div style="display: flex; gap: 5px">
        <HPlainButton @click="addTemplate"> 添加模版 </HPlainButton>
        <el-dropdown trigger="click">
          <HButton :disabled="selecttion.length == 0">
            批量操作
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </HButton>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="changeAll(1)">
                <el-icon>
                  <CircleCheck />
                </el-icon>
                批量启用
              </el-dropdown-item>
              <el-dropdown-item @click="changeAll(2)">
                <el-icon>
                  <Warning />
                </el-icon>
                批量禁用
              </el-dropdown-item>
              <el-dropdown-item @click="changeAll(3)">
                <el-icon>
                  <Delete />
                </el-icon>
                批量删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div class="search flex-align-center">
        <el-input
          v-model="name"
          placeholder="名称搜索"
          class="input-with mr5"
          clearable
          @keyup.enter="getList"
           @clear="getList"
        />
        <HButton type="primary" @click="getList">
          <el-icon>
            <Search />
          </el-icon>
          搜索
        </HButton>
      </div>
    </div>
    <div class="table-list">
      <el-table
        border
        stripe
        resizable
        :data="tableData"
        @selection-change="handleChange"
        ref="tableDom"
        height="100%"
        style="position: absolute"
      >
        <el-table-column show-overflow-tooltip type="selection" width="40" fixed="left" />
        <el-table-column show-overflow-tooltip type="index" label="序号" width="50" />
        <el-table-column show-overflow-tooltip prop="name" label="模版名称" min-width="200" />
        <el-table-column show-overflow-tooltip prop="status" label="状态" width="70">
          <template #default="scope">
            <HStatus v-if="!scope.row.status">启用</HStatus>
            <HStatus v-if="scope.row.status" type="info">禁用</HStatus>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="moduleName" label="应用工单模块" width="200" />
        <el-table-column show-overflow-tooltip prop="createEmp" label="创建人员" width="80" />
        <el-table-column show-overflow-tooltip prop="updateEmp" label="更新人员" width="80" />
        <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" width="150" />
        <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间" width="150" />
        <el-table-column show-overflow-tooltip fixed="right" label="操作" width="60">
          <template #default="scope">
            <HLink @click="viewDetail(scope.row.id)">详细</HLink>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer flex-justify-end">
      <Pagination
        ref="pagination"
        :list_total="total"
        @size-change="getList"
        @current-change="getList"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { ref, markRaw } from 'vue'
  import { Search, Warning, Delete, ArrowDown, CircleCheck } from '@element-plus/icons-vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { useRouter } from 'vue-router'
  import { visitTmpGetList, visitTmpDisable, visitTmpDelete } from '@/api/basic'
  import HPlainButton from '@/components/common/button/HPlainButton.vue'
  import HButton from '@/components/common/button/HButton.vue'
  import HStatus from '@/components/common/status/HStatus.vue'
  import HLink from '@/components/common/link/HLink.vue'

  const router = useRouter()
  const name = ref('')
  const tableData = ref([]) // 列表数据
  const tableDom = ref() // 列表dom
  const pagination = ref() // 分页dom
  const total = ref(0) // 总数目
  const loading = ref(false)

  // 添加模版
  const addTemplate = () => {
    router.push('/busic/base/addRateTemp')
  }

  // 编辑模版
  const viewDetail = (id) => {
    router.push('/busic/base/editRateTemp/' + id)
  }

  // 获取列表数据
  const getList = async () => {
    loading.value = true
    const data = {
      limit: pagination.value.size,
      name: name.value,
      page: pagination.value.current,
    }
    await visitTmpGetList(data).then((res) => {
      tableData.value = res.data.data.rows
      total.value = parseInt(res.data.data.total)
    })
    loading.value = false
  }

  defineExpose({ getList })

  // 获取表格选中的数据
  const selecttion = ref([])
  const handleChange = (val: any[]) => {
    if (val.length != 0) {
      val.forEach((item: { id: any }) => {
        if (Object.values(selecttion.value).indexOf(item.id) == -1) {
          selecttion.value.push(item.id)
        } else {
          selecttion.value = selecttion.value.filter((i) => i == item.id)
        }
      })
    } else {
      selecttion.value = []
    }
  }

  // 修改状态的方法
  const chnageMethod = (arr, type, method, status) => {
    if (arr.length == 0) {
      ElMessage({
        message: `请选择要${type}的模版`,
        type: 'warning',
        duration: 2000,
      })
      return
    }
    ElMessageBox({
      type: type == '删除' ? 'error' : 'warning',
      title: '提示',
      message: `确认${type}选中的模版?`,
      showCancelButton: true,
      closeOnClickModal: false,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.confirmButtonText = '加载中...'
          setTimeout(() => {
            done()
            setTimeout(() => {
              instance.confirmButtonLoading = false
            }, 0)
          }, 1000)
        } else {
          done()
        }
      },
    }).then(async () => {
      if (status != 3) {
        await method(arr, status).then((res: any) => {
          ElMessage({
            message: res.data.message,
            type: 'success',
            duration: 2000,
          })
        })
      } else {
        await method(arr).then((res: any) => {
          ElMessage({
            message: res.data.message,
            type: 'success',
            duration: 2000,
          })
        })
      }
      selecttion.value = []
      tableDom.value.clearSelection()
      getList()
    })
  }

  // 批量启用/禁用/删除
  const changeAll = (n) => {
    switch (n) {
      case 1:
        chnageMethod(selecttion.value, '启用', visitTmpDisable, false)
        break
      case 2:
        chnageMethod(selecttion.value, '禁用', visitTmpDisable, true)
        break
      case 3:
        chnageMethod(selecttion.value, '删除', visitTmpDelete, 3)
        break
    }
  }
</script>

<style scoped lang="scss">
  @import '../../index.scss';
</style>
